<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="refresh" content="60"> <!-- 每1秒刷新一次，时间单位为秒 -->
    <title>GWAC_point_track</title>
<!--    <link rel="stylesheet" href="style.css">-->
       <style>
        body {
            font-family: Arial, sans-serif;
        }

        #localTime {
            width: 100%;
            text-align: center;
            font-size: 24px;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .gallery {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 10px;
        }

        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 20px;
            width: 100%;
        }

        .image-container img {
            width: 18%;
            margin: 1%;
            height: auto;
        }

        .image-caption {
            width: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            text-align: center;
            padding: 5px 0;
            font-size: 16px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="localTime" style="font-size: 24px; margin-top: 20px;"></div> <!-- 时间显示区域 -->
    <div class="gallery">
        <div class="image-container skyobs">
        <div class="image-caption">转台指向天区图</div>
            <img class="skyobs" src="Images/015_skyobs.png" alt="Image 1">
            <img class="skyobs" src="Images/025_skyobs.png" alt="Image 2">
            <img class="skyobs" src="Images/035_skyobs.png" alt="Image 3">
            <img class="skyobs" src="Images/045_skyobs.png" alt="Image 4">
            <img class="skyobs" src="Images/055_skyobs.png" alt="Image 5">
            <img class="skyobs" src="Images/065_skyobs.png" alt="Image 6">
            <img class="skyobs" src="Images/075_skyobs.png" alt="Image 7">
            <img class="skyobs" src="Images/085_skyobs.png" alt="Image 8">
            <img class="skyobs" src="Images/095_skyobs.png" alt="Image 9">
            <img class="skyobs" src="Images/105_skyobs.png" alt="Image 10">
        </div>

        <div class="image-container track">
            <div class="image-caption">转台观测跟踪图</div>
            <img class="track" src="Images/015_track.png" alt="Image 1">
            <img class="track" src="Images/025_track.png" alt="Image 2">
            <img class="track" src="Images/035_track.png" alt="Image 3">
            <img class="track" src="Images/045_track.png" alt="Image 4">
            <img class="track" src="Images/055_track.png" alt="Image 5">
            <img class="track" src="Images/065_track.png" alt="Image 6">
            <img class="track" src="Images/075_track.png" alt="Image 7">
            <img class="track" src="Images/085_track.png" alt="Image 8">
            <img class="track" src="Images/095_track.png" alt="Image 9">
            <img class="track" src="Images/105_track.png" alt="Image 10">
        </div>
        <div class="image-container alt">
            <div class="image-caption">转台指向高度图</div>
            <img class="alt" src="Images/015_alt.png" alt="Image 1">
            <img class="alt" src="Images/025_alt.png" alt="Image 2">
            <img class="alt" src="Images/035_alt.png" alt="Image 3">
            <img class="alt" src="Images/045_alt.png" alt="Image 4">
            <img class="alt" src="Images/055_alt.png" alt="Image 5">
            <img class="alt" src="Images/065_alt.png" alt="Image 6">
            <img class="alt" src="Images/075_alt.png" alt="Image 7">
            <img class="alt" src="Images/085_alt.png" alt="Image 8">
            <img class="alt" src="Images/095_alt.png" alt="Image 9">
            <img class="alt" src="Images/105_alt.png" alt="Image 10">
        </div>
    </div>

   <script>
        function updateLocalTime() {
            const now = new Date();
            const localTimeString = now.toLocaleTimeString(); // 获取当地时间的字符串表示
            document.getElementById('localTime').textContent = `${localTimeString}`;
        }

        updateLocalTime(); // 初始化时间显示

        // 每1秒检查一次更新
        setInterval(checkForUpdates, 1000);
    </script>

</body>
</html>
